<template>
    <div class="fy_mian">
        <div class="page_row">
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/outfit' }"
                    >特装</el-breadcrumb-item
                    >
                    <el-breadcrumb-item
                    >撤展验收</el-breadcrumb-item
                    >
                </el-breadcrumb>
            </div>
<!--            <div class="fy_header">-->
<!--                <div>-->
<!--                    <el-form size="mini" inline ref="form" :model="queryParams">-->
<!--                        <el-form-item label="展位号:">-->
<!--                            <el-input clearable v-model="queryParams.name"></el-input>-->
<!--                        </el-form-item>-->
<!--                        <el-form-item>-->
<!--                            <el-button type="primary">搜索</el-button>-->
<!--                        </el-form-item>-->
<!--                    </el-form>-->
<!--                </div>-->
<!--            </div>-->
            <div>
                <el-table  :data="supervisionList">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="序号" type="index" />
                    <el-table-column label="展馆号" align="center" prop="exNumber" />
                    <el-table-column label="展位号" align="center" prop="standNum" />
                    <el-table-column label="搭建负责人姓名" align="center" prop="personName" />
                    <el-table-column label="搭建负责人电话" align="center" prop="personPhone" />
                    <el-table-column label="安全员姓名" align="center" prop="superviser" />
                    <el-table-column label="违规原因" align="center" prop="illegalReason" />
                    <el-table-column label="违规图片" align="center" prop="illegalImgUrl">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px;"
                                :src="scope.row.illegalImgUrl"
                                :preview-src-list="[scope.row.illegalImgUrl]"/>
                    </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="罚款" align="center" prop="deduction" />
                </el-table>
                <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                />

            </div>
        </div>
    </div>
</template>
<script>
    import { listSupervisionForWeb, getSupervision } from "@/api/outfit/supervision";
    export default {
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 安全监管表格数据
                supervisionList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    standNum: null,
                    personName: null,
                    superviser: null,
                    exhibitionId: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                options: [],
                value: [],
                exhibitionList: [],
                list: [],
                loadingSearch: false,
            };
        },
        created() {
            this.getList();
        },
        methods: {
            /** 查询安全监管列表 */
            getList() {
                listSupervisionForWeb(this.queryParams).then(response => {
                    this.supervisionList = response.rows;
                    this.total = response.total;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    standId: null,
                    exNumber: null,
                    standNum: null,
                    personName: null,
                    personPhone: null,
                    superviser: null,
                    illegalReason: null,
                    illegalImgUrl: null,
                    createTime: null,
                    deleteFlag: null,
                    deduction: null
                };
                this.resetForm("form");
            },
            checkFileSuffix(fileSuffix) {
                let arr = ["png", "jpg", "jpeg"]
                debugger
                if (fileSuffix) {
                    return arr.some(type => {
                        return fileSuffix.indexOf(type) > -1;
                    });
                }
            },
        },
    };
</script>
<style scoped>
    .fy_mian {
        padding: 20px;
    }
    /deep/.el-table th.el-table__cell {
        background-color: #f8fcfc !important;
        text-align: center !important;
    }
    /deep/.el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        text-align: center !important;
    }
    .fy_header {
        margin: 20px 0;
    }
</style>